$(function () {
    initArtCateList()
    //定义一个获取文章类别的函数
    function initArtCateList() {
        $.ajax({
            type: "get",
            url: "/my/article/cates",
            success: function (response) {
                // console.log(response);
                //使用模板引擎渲染数据
                //调用templete方法  模板id,数据对象
                let res = template('tpl-table', response)
                //将结果添加到tbody中
                $("tbody").html(res)
            }
        });
    }
    let layer = layui.layer
    //为添加类别按钮添加点击事件
    let indexAdd = null
    $("#btnAddCate").on("click", function () {
        //使用layui的弹出层 点击按钮打开弹出层 给弹出层定义一个层名
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            //将script标签里的html结构的表单添加到弹出层里
            content: $("#dialog-add").html()
        });
    })
    //通过事件代理的形式为添加文章分类表单添加submit事件
    $("body").on("submit","#form-add",function(e) {
        e.preventDefault()
        //通过ajax发送数据
        $.ajax({
            method:'post',
            url:'/my/article/addcates',
            data:$(this).serialize(),
            success:function (res) {
                if (res.status !== 0) {
                    return layer.msg('新增分类失败!')
                }
                //成功后在调用一次从后台获取文章分类的函数
                initArtCateList()
                layer.msg('新增分类成功!')
                //根据层名关闭对应的弹出层
                layer.close(indexAdd)
            }
        })
    })
    //通过事件委托的方式为编辑按钮添加点击事件
    let indexEdit = null 
    let form = layui.form
    $("tbody").on("click",".btn-edit",function () {
        //点击后弹层
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $("#dialog-edit").html()
        })
        let id = $(this).attr("data-id")
        //根据id发起请求获取对应的数据 
        $.ajax({
            method:'get',
            url:'/my/article/cates/' + id,
            success: function(res) {
                // console.log(res);
                //由于返回来的数据含有id属性所以需要在html结构中添加id隐藏域
                form.val("form-edit",res.data)
            }
        })
    })
    //通过事件委托的方式为修改表单添加submit事件
    $("body").on("submit","#form-edit",function (e) {
        e.preventDefault()
        $.ajax({
            method:'post',
            url:'/my/article/updatecate',
            data:$(this).serialize(),
            success:function (res) {
                if (res.status !==  0) {
                    return layer.msg(res.message)
                }
                layer.msg(res.message)
                //关闭弹出层
                layer.close(indexEdit)
                //渲染数据
                initArtCateList()
            }
        })
    })
    //通过事件委托的方式为删除按钮绑定点击事件
    $("body").on('click','.btn-delete',function () {
        //获取对应的id
        let id = $(this).attr("data-id")
        //提示用户是否删除
        layer.confirm('是否要删除?', {icon: 3, title:'提示'}, function(index){
            //当用户点击了确定就发起ajax请求删除后天里的数据,然后在数据驱动视图更新
            $.ajax({
                method:'get',
                url:'/my/article/deletecate/' + id,
                success:function (res) {
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }
                    //提示删除成功,关闭弹出层
                    layer.msg(res.message)
                    layer.close(index)
                    //数据驱动视图 从新渲染数据
                    initArtCateList()
                }
            })
            
            
          });
    })
})